<div class="row">
  <div class="col-md-6 col-xxxl-4">
    <nb-card size="medium">
      <nb-card-header>
        Used Fonts
      </nb-card-header>
      <nb-card-body>
        <div class="font-row">
          <div class="header">
            <div class="name bold">Open Sans</div>
          </div>
          <p>
            Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
            there live the blind texts.
            Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
          </p>
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="medium" class="headings-card">
      <nb-card-header>
        Headings
      </nb-card-header>
      <nb-card-body>
        <div class="header">
          <div>
            <h1>H1. Heading</h1>
          </div>

          <div class="detail">
            800 2.25rem (36px)
          </div>
        </div>
        <div class="header">
          <div>
            <h2>H2. Heading</h2>
          </div>

          <div class="detail">
            800 2rem (32px)
          </div>
        </div>
        <div class="header">
          <div>
            <h3>H3. Heading</h3>
          </div>

          <div class="detail">
            800 1.875rem (30px)
          </div>
        </div>
        <div class="header">
          <div>
            <h4>H4. Heading</h4>
          </div>

          <div class="detail">
            800 1.625rem (26px)
          </div>
        </div>
        <div class="header">
          <div>
            <h5>H5. Heading</h5>
          </div>

          <div class="detail">
            800 1.375rem (22px)
          </div>
        </div>
        <div class="header">
          <div>
            <h6>H6. Heading</h6>
          </div>

          <div class="detail">
            800 1.125rem (18px)
          </div>
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'medium' : 'large'">
      <nb-card-header>
        Article Example
      </nb-card-header>
      <nb-card-body>
        <h4>So what's About the grammar?</h4>
        <p>
          Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
          there live the blind texts.
          They live in <strong>Bookmarksgrove</strong>.
        </p>
        <p>
          A small <strong>river named Duden</strong> flows by their place and supplies it with the
          necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly
          into your mouth.
          Even the all-powerful Pointing has no control about the blind texts it is an almost
          unorthographic life One day however a small
          line of blind text by the name of
          <a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
          the far <strong>World of Grammar</strong>.
        </p>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="large">
      <nb-card-header>
        Font Colors
      </nb-card-header>
      <nb-card-body>
        <div class="colors">
          <div class="item text-heading">
            <div class="color bg-heading"></div>
            <div>
              <h5 class="text-heading">Heading Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-basic">
            <div class="color bg-body"></div>
            <div>
              <h5 class="text-basic">Body Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-hint">
            <div class="color bg-hint"></div>
            <div>
              <h5 class="text-hint">Hint Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-link">
            <div class="color bg-link"></div>
            <div>
              <h5 class="text-link">Link Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-primary">
            <div class="color bg-status-primary"></div>
            <div>
              <h5 class="text-primary">Primary Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-success">
            <div class="color bg-status-success"></div>
            <div>
              <h5 class="text-success">Success Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-info">
            <div class="color bg-status-info"></div>
            <div>
              <h5 class="text-info">Info Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-warning">
            <div class="color bg-status-warning"></div>
            <div>
              <h5 class="text-warning">Warning Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-danger">
            <div class="color bg-status-danger"></div>
            <div>
              <h5 class="text-danger">Danger Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="large">
      <nb-card-header>
        Alerts
      </nb-card-header>
      <nb-card-body>
        <nb-alert>
          <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
        </nb-alert>
        <nb-alert status="primary">
          <strong>Oh snap!</strong> Change a few things up and try submitting again.
        </nb-alert>
        <nb-alert status="success">
          <strong>Well done!</strong> You successfully read this important alert message.
        </nb-alert>
        <nb-alert status="info">
          <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
        </nb-alert>
        <nb-alert status="warning">
          <strong>Warning!</strong> Better check yourself, you're not looking too good.
        </nb-alert>
        <nb-alert status="danger">
          <strong>Oh snap!</strong> Change a few things up and try submitting again.
        </nb-alert>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="large">
      <nb-card-header>
        Lists
      </nb-card-header>
      <nb-card-body>
        <h4>Ordered List</h4>
        <ol class="mb-5">
          <li>Far far away, behind the word mountains</li>
          <li>Far from the countries Vokalia and Consonantia</li>
          <li>There live the blind texts.</li>
          <li>Right at the coast of the Semantics.</li>
          <li>A small river named Duden flows</li>
        </ol>

        <h4>Unordered List</h4>
        <ul class="mb-5">
          <li>Far far away, behind the word mountains</li>
          <li>Far from the countries Vokalia and Consonantia</li>
          <li>There live the blind texts.</li>
          <li>Right at the coast of the Semantics.</li>
          <li>A small river named Duden flows</li>
        </ul>
      </nb-card-body>
    </nb-card>
  </div>
</div>
